<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" @defSelect="defSelectData" />
    <div class="m-4 mr-0 w-3/4 xl:w-4/5 overflow-hidden bg-white">
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="1" tab="部门信息">
          <div class="m-4 mr-0 w-3/4 xl:w-4/5 overflow-hidden bg-white">
            <a-descriptions title="" bordered>
              <a-descriptions-item label="Product">Cloud Database</a-descriptions-item>
              <a-descriptions-item label="Billing Mode">Prepaid</a-descriptions-item>
              <a-descriptions-item label="Automatic Renewal">YES</a-descriptions-item>
              <a-descriptions-item label="Order time">2018-04-24 18:00:00</a-descriptions-item>
              <a-descriptions-item label="Usage Time" :span="2"
                >2019-04-24 18:00:00</a-descriptions-item
              >
              <a-descriptions-item label="Status" :span="3">
                <a-badge status="processing" text="Running" />
              </a-descriptions-item>
              <a-descriptions-item label="Negotiated Amount">$80.00</a-descriptions-item>
              <a-descriptions-item label="Discount">$20.00</a-descriptions-item>
              <a-descriptions-item label="Official Receipts">$60.00</a-descriptions-item>
              <a-descriptions-item label="Config Info">
                Data disk type: MongoDB
                <br />
                Database version: 3.4
                <br />
                Package: dds.mongo.mid
                <br />
                Storage space: 10 GB
                <br />
                Replication factor: 3
                <br />
                Region: East China 1
                <br />
              </a-descriptions-item>
            </a-descriptions>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="部门用户" force-render>
          <BasicTable @register="registerTable" :searchInfo="searchInfo" />
        </a-tab-pane>
      </a-tabs>
    </div>

    <!-- <AccountModal @register="registerModal" @success="handleSuccess" /> -->
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, reactive, ref, unref, watch } from 'vue';

  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { getAccountList, deleteUser } from '/@/api/system/user/user.api';
  import { PageWrapper } from '/@/components/Page';
  import DeptTree from './DeptTree.vue';

  import { useModal } from '/@/components/Modal';
  // import AccountModal from './AccountModal.vue';

  import { columns, searchFormSchema } from './DepartUser.data';
  import { useGo } from '/@/hooks/web/usePage';

  export default defineComponent({
    name: 'AccountManagement',
    components: { BasicTable, PageWrapper, DeptTree, TableAction },

    setup() {
      const go = useGo();
      const activeKey = ref('2');
      const [registerModal, { openModal }] = useModal();
      const searchInfo = reactive<Recordable>({});
      const deptId = ref('');
      let defSelectData = (n) => {
        deptId.value = n.value[0];
      };

      const [registerTable, { reload, updateTableDataRecord }] = useTable({
        title: '账号列表',
        api: getAccountList,
        rowKey: 'id',
        columns,
        formConfig: {
          labelWidth: 120,
          schemas: searchFormSchema,
          autoSubmitOnEnter: true,
        },
        immediate: false,
        useSearchForm: true,
        showTableSetting: true,
        bordered: true,
        handleSearchInfoFn(info) {
          handleSelect();
          console.log('handleSearchInfoFn', info);
          return info;
        },

        // actionColumn: {
        //   width: 120,
        //   title: '操作',
        //   dataIndex: 'action',
        //   // slots: { customRender: 'action' },
        // },
      });
      watch(deptId, (state, preState) => {
        searchInfo.departId = state;
        reload();
      });

      function handleCreate() {
        openModal(true, {
          isUpdate: false,
        });
      }

      function handleEdit(record: Recordable) {
        console.log(record);
        openModal(true, {
          record,
          isUpdate: true,
        });
      }

      function handleDelete(record: Recordable) {
        deleteUser({ id: record.id }, reload);
        console.log(record);
      }

      function handleSuccess({ isUpdate, values }) {
        if (isUpdate) {
          // 演示不刷新表格直接更新内部数据。
          // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
          const result = updateTableDataRecord(values.id, values);
        } else {
          reload();
        }
      }

      function handleSelect(departId = deptId.value) {
        searchInfo.departId = departId;
        reload();
      }

      function handleView(record: Recordable) {
        go('/system/account_detail/' + record.id);
      }

      return {
        registerTable,
        registerModal,
        handleCreate,
        handleEdit,
        handleDelete,
        handleSuccess,
        handleSelect,
        handleView,
        searchInfo,
        activeKey,
        defSelectData,
      };
    },
  });
</script>

<style lang="less">
  @import './index.less';
</style>
